【Session Report】Mobile App Development with Serverless + AppSync

Hello, I'm Taewoo Kim at Classmethod, Inc., a Japanese company best-known for its outstanding AWS consulting works. We've been awarded "APN Consulting Partner of the Year 2018 – Japan" as well in 2018.

This is a session report for the presentation 「Serverless/AppSyncによるモバイル開発の今」at AWS Summit Tokyo 2019. The Japanese title can roughly be translated like the title of this post.

Taking photos was prohibitied in the conference hall, so this report only contains text content.

Well, the presentation was not given in a formal way, so the speaker actually changed the content of the presentation and showed us a fantastic demo of how AppSync works with a React app from scratch. (almost)

I attached some Q&As as well that I did right after the presentation and hope this will be supplement of this report.

Here begins!

About the Speaker

• Stephen Johnson, Solution Architect
• Amazon Web Services

Serverless?

To be serverless, it has to satisfy the followings:

1. No infrastructure you have to manage
2. Automatic Scaling
3. Pay for Value
4. HA and Security

GraphQL?

• AppSync is Amazon's manageed service for GraphQL.
• In REST API, you need to request to the endpoint with /posts, /comments, /author each, and aggregate them all to make use of them.
• In GraphQL, you just request a single query to the server and get all the data you want at once.
• The schema looks like the following.

  type User {
      id: ID!
      username: String!
      firstName: String
      lastName: String
      daysActive: Int
  }
  

• There are 3 types of operations in GraphQL : Queries, Mutations, Subscriptions
• Especially, subscription is for real-time communication. (pub/sub model)

AWS AppSync

• managed service for GraphQL
• data source connection
• integrated with many AWS services
• secure and scalable

How Realtime Notification Works?

• Data is given to AWS Lambda first, AWS AppSync processes, and notify to the subscribers in the realtime.

Special Guest - Gunosy, Japanese Company

Gunosy

• Speaker : Yamamoto Shun, Development Team Manager

Gunosy Sports

• an mobile app for sports industry
• The service is developed utilizing AppSync

Why chose AppSync?

• Updated data can be notified real-time basis
• Schema-first
• Supports nested data structure

Server side

• Real time communication has been implemented with AWS AppSync, Lambda, DynamoDB

Some Tips when using AppSync

• When using DynamoDB, you don't need GSI to use ElasticSearch
• Server-side caching is not supported, so cost for DynamoDB can be expensive. (Author: I think the second one can be resolved by using In-memory caching solutions like AWS ElastiCache, though it depends on the overall architecture of the system.)

Demo

Now Stephen showed us a fantastic demo of how AppSync works with a React app... Yeah! Live demo! Incredible! The recording of the presentation was prohibited, so I'll just write some flow how the demo proceeded.

First, he initialized an Amplify project in a simple React application project directory.

amplify init

The Amplify CLI tool asked some basic information of the project like project name, environment, programming language, etc.

And moved on to another project.

amplify status

It didn't have any models or API for the backend service yet, because he didn't make any. The Amplify status command showed us some table fields which are labeled like: Category, Resource name, Operation, and Provider plugin

And moved on to another proejct and finally he added an API.

amplify add api

The Amplify CLI asked type of the API(REST / GraphQL), API name, and whether we'd like to import an existing GraphQL schema or generate a new one. So he generated a new one with the following schema.

type Todo @model {
  id: ID!
  name: String!
  description: String!
}

He explained the most important part here is @model part, which is called "transform".

Now get back to the previous project and now we could see an API for the project now with the following command.

amplify status

it gave a GraphQL endpoint and some other stuffs as well.

He kept moving on to subscription part. The AppSync automatically notified to the React app right after data changed. Everything was simple and looked promising!

Here's some questions that I did right after the session

Q. Most of the database schema for general application services are quite complicated and heavily nested. How can AppSync resolve this problem?

A. You mentioned the pain point of it. But you still can modify the resolver that is automatically generated, and even use Lambda function to fully customize it. And you can directly deal with the raw SQL queries. So most of the time you can still deal with such problems.

Q. Do you think AppSync can be used for entire backend API service?

A. Yeah I think it can be. I personally like GraphQL techonology a lot. I used to be a backend engineer exploiting REST way of development. You know, it's really a nightmare to modify the API to serve just a single attribute, and test and deploy the product. With AppSync, backend engineers actually save a lot of time to do this.

Q. Thank you very much! And the live demo was fantastic!

A. Haha. Thank you!